<template>
    <div class='checkbox'>
        <div class='shoppingCheckbox' @click="checkboxClick">
            <img src='../../assets/img/checkbox.png' v-show="isTrue">
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            isTrue:true
        }
    },
    methods:{
        checkboxClick(){
            this.isTrue=! this.isTrue
            this.$emit('shoppingreduce')
            // this.shoppingreduce()
        }
    },
    // props:{
    //     shoppingreduce:{
    //         type:Function
    //     }
    // }
}
</script>

<style scoped>
.checkbox{
    position:absolute;
    left:0;
    top:50%;
    transform: translateY(-50%);
}
    .shoppingCheckbox{
        float: left;
        width: 23px;
        height: 23px;
        border: 1px solid #000;
        border-radius: 50%;
    }
    .shoppingCheckbox img{
        width: 100%;
    }
</style>